<template>
	<uni-popup ref="popupRef" type="bottom" background-color="#fff" border-radius="24rpx 24rpx 0 0">
		<view class="sku_box">
			<view class="service_content">
				<view class="content_label">请选择服务规格</view>
				<view class="service_time_box">
					<view :class="['service_time_item', {'service_time_item_pick': skuItem.selected}]" v-for="skuItem in skuList" :key="skuItem.id" @tap.stop="selectServiceTime(skuItem)">{{skuItem.serviceTime}}</view>
				</view>
			</view>
			<view class="footer_box" @tap="confirm">
				<view class="footer_button">确认</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref, computed } from 'vue'

	const popupRef = ref()
	const props = defineProps({
		data: {
			type: Object,
			default: {}
		}
	})
	const emits = defineEmits(['confirm'])
	
	const skuList = computed(() => {
		return (props.data && props.data.skuList) || []
	})
	
	const selectServiceTime = (skuItem) => {
		skuItem.selected = !skuItem.selected
	}
	const open = () => {
		popupRef.value.open()
	}
	const close = () => {
		popupRef.value.close()
	}
	const confirm = () => {
		if (!validateServiceList()) return
		let selectedSkuList = []
		if (skuList.value instanceof Array) {
			selectedSkuList = skuList.value.filter(item => item.selected)
		}
		emits('confirm', selectedSkuList)
		close()
	}
	const validateServiceList = () => {
		const result = skuList.value.some(skuItem => {
				return skuItem.selected == true
			})
		if (!result) {
			uni.showToast({
				icon: 'none',
				title: '请选择服务时长'
			});
		}
		return result
	}
	
	defineExpose({open, close})
</script>

<style lang="scss" scoped>
	.sku_box {
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		box-sizing: border-box;
		padding: 48rpx 32rpx;
		// padding-bottom: calc(144rpx + 32rpx + constant(safe-area-inset-bottom));
		// padding-bottom: calc(144rpx + 32rpx + env(safe-area-inset-bottom));
	}
	
	.service_content {
		
		.content_label {
			font-weight: bold;
			font-size: 36rpx;
			color: #1A1A1A;
			margin-bottom: 36rpx;
		}
		.service_time_box {
			display: grid;
			grid-template-columns: repeat(3,1fr);
			grid-column-gap: 16rpx;
			grid-row-gap: 24rpx;
			
			.service_time_item {
				height: 70rpx;
				border-radius: 8rpx;
				border: 1rpx solid #CACCCC;
				font-size: 30rpx;
				color: #5C5E5E;
				line-height: 70rpx;
				text-align: center;
			}
			.service_time_item_pick {
				border: 1rpx solid #FF6084;
				color: #FF6084;
			}
		}
	}
	
	.footer_box {
		border-top: 36rpx solid #fff;
		padding: 8rpx 0;
		
		.footer_button {
			height: 88rpx;
			background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
			border-radius: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>